import React, { Component, useEffect, useState, useRef } from "react";
import {
  Input,
  Space,
  Radio,
  Row,
  Col,
  Table,
  Select,
  Tag,
  Popconfirm,
  Modal,
  Button,
  message,
} from "antd";
import { AudioOutlined } from "@ant-design/icons";
import { http } from "../../../api";
const { Search } = Input;
const { Option } = Select;
export default function ChooseMana() {
  // 属性
  const [codelist, setCodelist] = useState([]);
  const [flag, setFlag] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [data, SetData] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [content, setContent] = useState({});
  const [changeradios, setChangeradios] = useState(0);
  const [taotiflag, setTaotiflag] = useState(false);
  let [chooses, setChooses] = useState({});
  const [taolist, setTaolist] = useState([]);
  let radiochoose = useRef();
  const xxx = [
    {
      title: "序号",
      render: (v, item, index) => {
        return index + 1;
      },
    },
    {
      title: "标题",
      dataIndex: "subject",
    },
    {
      title: "相关技术",
      dataIndex: "technology",
    },
    {
      title: "发布人",
      dataIndex: "phone",
    },
    {
      title: "发布时间",
      dataIndex: "time",
    },
    {
      title: "操作",
      render: (v, item, index) => {
        {
          if (!flag) {
            return (
              <div style={{ display: "flex" }}>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    getdetails(v, item, index);
                  }}
                >
                  查看内容
                </Tag>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    passchoose(item);
                  }}
                >
                  审核通过
                </Tag>
                <Popconfirm
                  title="是否审核通过"
                  onConfirm={() => {
                    confirm(v, item, index);
                  }}
                  onCancel={cancel}
                  okText="确定"
                  cancelText="取消"
                >
                  <Tag
                    color="#FF6600"
                    style={{
                      height: 30,
                      width: 60,
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    审核失败
                  </Tag>
                </Popconfirm>
              </div>
            );
          } else {
            return (
              <div style={{ display: "flex" }}>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    getdetails(v, item, index);
                  }}
                >
                  查看内容
                </Tag>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  添加
                </Tag>
                <Popconfirm
                  title="是否删除"
                  onConfirm={() => {
                    confirm(v, item, index);
                  }}
                  onCancel={cancel}
                  okText="确定"
                  cancelText="取消"
                >
                  <Tag
                    style={{
                      height: 30,
                      width: 60,
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                    color="#FF6600"
                  >
                    删除
                  </Tag>
                </Popconfirm>
              </div>
            );
          }
        }
      },
    },
  ];
  const yyy = [
    {
      title: "序号",
      render: (v, item, index) => {
        return index + 1;
      },
    },
    {
      title: "标题",
      dataIndex: "subject",
    },
    {
      title: "相关技术",
      dataIndex: "technology",
    },
    {
      title: "发布人",
      dataIndex: "phone",
    },
    {
      title: "发布时间",
      dataIndex: "time",
    },
    {
      title: "操作",
      render: (v, item, index) => {
        {
          if (flag) {
            return (
              <div style={{ display: "flex" }}>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    getdetails(v, item, index);
                  }}
                >
                  查看内容
                </Tag>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    passchoose(item);
                  }}
                >
                  审核通过
                </Tag>
                <Popconfirm
                  title="审核失败"
                  onConfirm={() => {
                    confirm(v, item, index);
                  }}
                  onCancel={cancel}
                  okText="确定"
                  cancelText="取消"
                >
                  <Tag
                    color="#FF6600"
                    style={{
                      height: 30,
                      width: 60,
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    审核失败
                  </Tag>
                </Popconfirm>
              </div>
            );
          } else {
            return (
              <div style={{ display: "flex" }}>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    getdetails(v, item, index);
                  }}
                >
                  查看内容
                </Tag>
                <Tag
                  color="#3399CC"
                  style={{
                    height: 30,
                    width: 60,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                  onClick={() => {
                    openc(v, item, index);
                  }}
                >
                  添加
                </Tag>
                <Popconfirm
                  title="是否删除"
                  onConfirm={() => {
                    confirm(v, item, index);
                  }}
                  onCancel={cancel}
                  okText="确定"
                  cancelText="取消"
                >
                  <Tag
                    style={{
                      height: 30,
                      width: 60,
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                    color="#FF6600"
                  >
                    删除
                  </Tag>
                </Popconfirm>
              </div>
            );
          }
        }
      },
    },
  ];
  const [columns, setColumns] = useState(xxx);

  useEffect(() => {
    var list = [];
    // 获取专业
    http.categorylist().then((res) => {
      if (res.data.code == 200) {
        res.data.val.map((item) => {
          list.push(item.code);
        });
      }
      setCodelist(list);
      //   console.log(codelist);
    }, []);

    // 获取选择题
    http.getchoose({ status: 0 }).then((res) => {
      SetData(res.data.val);
    });
    setFlag(false);
    setColumns(xxx);
  }, []);
  const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: "#1890ff",
      }}
    />
  );
  // const handleChangeS = (value) => {
  //   // http.sortchoose()
  //   console.log(radiochoose, value);
  // }
  const handleChange = (value) => {
    console.log(value);
    if (value == 1) {
      setFlag(true);
      setColumns(yyy);
      setChangeradios(1);
    } else if (value == 0) {
      setFlag(false);
      setColumns(yyy);
      setChangeradios(0);
    }
    http.getchoose({ status: value }).then((res) => {
      SetData(res.data.val);
    });
  };
  const onSearch = (value) => {
    if (flag) {
      http
        .searchchoose({
          str: value,
          status: 1,
        })
        .then((res) => {
          SetData(res.data.val);
        });
    } else {
      http
        .searchchoose({
          str: value,
          status: 0,
        })
        .then((res) => {
          SetData(res.data.val);
        });
    }
  };
  const onSearch1 = (value) => {
    if (value) {
      http.searchtaotilist({ str: value }).then((res) => {
        var temp = res.data.val.concat(res.data.result);
        setTaolist(temp);
      });
    }
  };
  const changeRadio = (e) => {
    // console.log(flag);
    if (flag) {
      http.sortchoose({ code: e.target.value, status: 1 }).then((res) => {
        if (res.data.code == 200) {
          SetData(res.data.val);
        }
      });
    } else {
      http.sortchoose({ code: e.target.value, status: 0 }).then((res) => {
        if (res.data.code == 200) {
          SetData(res.data.val);
        }
      });
    }
  };
  // 方法
  // 气泡弹出框方法
  const cancel = () => {};
  const confirm = (v, item, i) => {
    http.deletechoose(item).then((res) => {
      if (res.data.code == 200) {
        http.getchoose({ status: changeradios }).then((res) => {
          SetData(res.data.val);
        });
      }
    });
  };

  // 对话框方法
  const showModal = (v) => {
    console.log(v);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    setTaotiflag(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setTaotiflag(false);
  };

  // 之定义方法
  const getdetails = (v, item, index) => {
    setContent({
      content: (
        <div>
          <label>题目：</label>
          <p>{item.subject}</p>
          <label>答案选项：</label>
          <p>
            <span style={{ marginRight: 10 }}>A、{item.answer[0]}</span>
            <span style={{ marginRight: 10 }}>B、{item.answer[1]}</span>
            <span style={{ marginRight: 10 }}>C、{item.answer[2]}</span>
            <span style={{ marginRight: 10 }}>D、{item.answer[3]}</span>
          </p>
          <label>正确答案：</label>
          <p>{item.correct}</p>
          <label>相关技术：</label>
          <p>{item.technology}</p>
          <label>角色权限：</label>
          <p>{item.choosesRole}</p>
        </div>
      ),
    });
    setIsModalVisible(true);
  };
  const passchoose = (item) => {
    http.passchoose(item).then((res) => {
      //   console.log(res);
    });
  };
  const openc = (v, item, index) => {
    setTaotiflag(true);

    setChooses(item);
  };
  const addtaoti = (item) => {
    if (item.subjects.length < item.amount) {
      var a = 0;
      item.subjects.forEach((item) => {
        if (chooses._id == item._id) {
          a = 1;
        }
      });
      if (a != 1) {
        var temp = item.subjects;
        temp.push(chooses);
        http
          .taoaddchoose({
            _id: item._id,
            subjects: temp,
          })
          .then((res) => {});
      } else {
        message.info("套题已存在这道选择题");
      }
    }
  };
  return (
    <div>
      <div
        style={{
          width: 500,
          height: 50,
          display: "flex",
          justifyContent: "space-between",
          marginBottom: 20,
        }}
      >
        <Search
          style={{ width: 300 }}
          placeholder="技术关键字"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
        />
        <Select
          defaultValue={0}
          style={{ width: 120, marginBottom: 10 }}
          onChange={handleChange}
        >
          <Option value={0}>未审核</Option>
          <Option value={1}>审核</Option>
        </Select>
      </div>

      <Row style={{ height: 30 }}>
        <Col style={{ height: 30 }}>
          <Radio.Group
            onChange={changeRadio}
            defaultValue={0}
            style={{ height: 30 }}
            ref={radiochoose}
          >
            {codelist &&
              codelist.map((item, i) => {
                return (
                  <Radio.Button
                    value={item}
                    key={i}
                    style={{ marginRight: 10 }}
                  >
                    {item}
                  </Radio.Button>
                );
              })}
          </Radio.Group>
        </Col>
        {/* <Col>
        <Select defaultValue="热度" style={{ width: 120, marginBottom: 10 }} onChange={handleChangeS} >
          <Option value={0}>降序</Option>
          <Option value={1}>升序</Option>
        </Select>
      </Col> */}
      </Row>
      <Table
        columns={columns}
        dataSource={data}
        style={{ marginTop: 30 }}
        rowKey={(item) => item._id}
      />

      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {content.content}
      </Modal>
      <Modal
        title="添加套题"
        visible={taotiflag}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <label>搜索框</label>
        <Search
          placeholder="请输入套题名字或者相关技术"
          onSearch={onSearch1}
          enterButton
        />
        <div>
          {taolist &&
            taolist.map((item, i) => {
              return (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    height: 50,
                  }}
                  key={i}
                >
                  <p>{item.title}</p>
                  <Button
                    type="primary"
                    onClick={() => {
                      addtaoti(item);
                    }}
                  >
                    添加
                  </Button>
                </div>
              );
            })}
        </div>
      </Modal>
    </div>
  );
}
